<template>
  <a-drawer
    :title="title"
    :closable="false"
    :maskClosable="false"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="所属学院" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback forceRender="true">
              <a-select
                show-search
                allowClear
                placeholder="请选择所属学院"
                v-decorator="['collId', { rules: [{ required: true, message: '请选择所属学院！' }] }]"
                :disabled="collSwitch"
              >
                <a-select-option v-for="item of this.collList" :key="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="实验模块名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入实验模块名称"
                v-decorator="['name', { rules: [{ required: true, message: '请输入实验模块名称！' }] }]"
                :disabled="id != ''"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="排序号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input-number
                placeholder="请输入排序号"
                v-decorator="['sortNum', { rules: [{ required: true, message: '请输入排序号！' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="说明" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-textarea aria-rowcount="3" placeholder="请输入实验模块选课说明" v-decorator="['remark']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <div class="drawer-footer">
      <a-button class="left" @click="handleCancel"> 关闭 </a-button>
      <a-button class="right" type="primary" @click="handleSubmit"> 提交 </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { sysCollegeList } from '@/api/modular/system/sysCollegeManage'
import store from '@/store'
import { moduleAdd, moduleEdit } from '@/api/modular/system/moduleManage'

export const dateFormat = 'YYYY-MM-DD'
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      id: '',
      title: '',
      collList: [],
      collSwitch: false,
    }
  },
  created() {

  },
  methods: {
    getCollList() {
      sysCollegeList().then((res) => {
        if (res.success) {
          this.collList = res.data
        }
      })
    },
    // 初始化方法
    open(record) {
      this.getCollList()
      if (record) {
        this.id = record.id
        this.title = '编辑实验模块信息'
        this.collSwitch = true
        setTimeout(() => {
          this.form.setFieldsValue({
            id: record.id,
            sortNum: record.sortNum,
            name: record.name,
            remark: record.remark,
            collId: record.collId,
          })
        }, 100)
      } else {
        this.id = ''
        this.title = '新增实验模块信息'
        if (store.getters.admintype != '1') {
          this.collSwitch = true
          setTimeout(() => {
            this.form.setFieldsValue({
              collId: store.getters.userInfo.collId,
            })
          }, 100)
        } else {
          this.collSwitch = false
        }
      }
      this.visible = true
    },
    handleSubmit() {
      const {
        form: { validateFields },
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log(values)
          const data = { ...values }
          if (this.id) {
            data.id = this.id
            moduleEdit(data)
              .then((res) => {
                if (res.success) {
                  this.$message.success('更新实验模块信息成功')
                  this.confirmLoading = false
                  this.$emit('ok', data)
                  this.handleCancel()
                } else {
                  this.$message.error('更新系实验模块信息失败：' + res.message)
                }
              })
              .finally((res) => {
                this.confirmLoading = false
              })
          } else {
            moduleAdd(data)
              .then((res) => {
                if (res.success) {
                  this.$message.success('新增实验模块信息成功')
                  this.confirmLoading = false
                  this.$emit('ok', data)
                  this.handleCancel()
                } else {
                  this.$message.error('新增实验模块信息失败：' + res.message)
                }
              })
              .finally((res) => {
                this.confirmLoading = false
              })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
  },
}
</script>
